<template>
  <div style="width: 100%;height: 100%;">
    <BaseMainSlot :show-tab="true">
      <template v-slot:search-box>
        <SearchBox @search="search">
          <div class="seach-box">
            <div class="select-box-content">
              <div class="select-box-content-name">产线名称：</div>
              <el-input v-model="filterData.productLineName" placeholder="请输入产线名称" clearable @change="search()" />
            </div>
            <div class="select-box-content">
              <div class="select-box-content-name">关联加工产品：</div>
              <el-select v-model="filterData.productId" placeholder="请选择关联加工产品" clearable filterable @change="search()">
                <el-option v-for="item in productList" :key="item.productId" :label="item.productName" :value="item.productId" />
              </el-select>
            </div>
          </div>
        </SearchBox>
      </template>
      <template v-slot:btn-box>
        <div class="page-top__todo">
          <CommonBtn @click="reload">刷新</CommonBtn>
          <CommonBtn @click="addEditShow = true">添加</CommonBtn>
          <CommonBtn :disabled="!delActive" @click="del">删除</CommonBtn>
        </div>
      </template>
      <template v-slot:content>
        <div class="content-wrapper">
          <el-table v-loading="tableLoading" :data="tableData" stripe border height="calc(100% - 50px)" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" :selectable="$utils.selectable" width="55" />
            <el-table-column type="index" label="序号" width="100" />
            <el-table-column prop="productLineName" label="产线名称" />
            <el-table-column prop="lineEquMapperList" label="关联设备">
              <template v-if="!('index' in scope.row)" slot-scope="scope">
                <span v-if="scope.row.lineEquMapperList.length === 0">未关联设备</span>
                <el-button v-else type="text" class="text-btn-cursor" size="small" @click="showEqu(scope.row)">查看设备</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="lineProductMapperList" label="关联加工产品">
              <template v-if="!('index' in scope.row)" slot-scope="scope">
                <span v-for="(item, index) in scope.row.lineProductMapperList" :key="index">
                  {{ item.productName }}
                  <i v-if="index !== scope.row.lineProductMapperList.length - 1">-</i>
                </span>
              </template>
            </el-table-column>
            <el-table-column width="250" label="操作">
              <template v-if="!('index' in scope.row)" slot-scope="scope">
                <el-button type="text" class="text-btn-cursor" size="small" @click="edit(scope.row)">修改</el-button>
                <el-button type="text" class="text-btn-cursor cursor-delete" size="small" @click="handleDelete(scope.row.productLineNo)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <Pagination :page-size="pageSize" :current-page="currentPage" :total-size="totalSize" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
        </div>
      </template>
    </BaseMainSlot>
    <AddEditDialog v-model="addEditShow" :selected-item="selectedItem" :product-list="productList" @reflash="search" />
    <Equ v-model="showEquDialog" :list="currentPageEquList" title="关联设备" />
  </div>
</template>
<script>
import BaseMainSlot from '@/components/BaseMainSlot/newBaseMainSlot';
import Pagination from '@/components/Pagination';
import api from '@/api/processing-management/basic-info-manage/product-line';
import apiProcess from '@/api/processing-management/basic-info-manage/product-process';
import AddEditDialog from './components/add-edit-dialog.vue';
import SearchBox from '@/components/SearchBox/index.vue';
import EquipModelApi from '@/api/processing-management/equip-manage/equip-model';
import Equ from '@/views/processing-management/basic-info-manage/product-line/components/equ.vue';
export default {
  name: 'EquipStadingBook',
  inject: ['reload'],
  components: {
    BaseMainSlot,
    SearchBox,
    Pagination,
    AddEditDialog,
    Equ
  },
  props: {},
  data() {
    return {
      tableData: [],
      tableLoading: false,
      currentPage: 1,
      pageSize: 10,
      totalSize: 0,
      filterData: {
        productLineName: '',
        productId: ''
      },
      addEditShow: false,
      productList: [],
      selectedList: [],
      delActive: false,
      selectedItem: null,
      showEquDialog: false,
      currentPageEquList: []
    };
  },
  watch: {
    addEditShow(v) {
      if (!v) {
        this.selectedItem = null;
      }
    },
    showEquDialog(v) {
      if (!v) {
        setTimeout(() => {
          this.currentPageEquList = [];
        }, 250);
      }
    }
  },
  created() {
    this.getProductList();
    this.search();
  },
  methods: {
    showEqu(item) {
      this.currentPageEquList = item.lineEquMapperList;
      this.showEquDialog = true;
    },
    handleSelectionChange(list) {
      this.selectedList = list.map(item => {
        return item.productLineNo;
      });
      if (this.selectedList && this.selectedList.length > 0) {
        this.delActive = true;
      } else this.delActive = false;
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.search();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.search();
    },
    search() {
      const { currentPage, pageSize } = this;
      const filterData = JSON.parse(JSON.stringify(this.filterData));
      if (Object.prototype.hasOwnProperty.call(filterData, 'materialTypeNo')) {
        filterData.materialTypeNo = filterData.materialTypeNo[0];
      }
      this.tableLoading = true;
      api
        .getList({
          page: currentPage,
          size: pageSize,
          entity: {
            ...filterData
          }
        })
        .then(res => {
          if (res.code === 1) {
            this.tableData = this.$utils.addblankmet(res.data.content, pageSize);
            this.totalSize = res.data.totalElements;
            if (res.data.content.length === 0 && this.currentPage !== 1) {
              this.currentPage--;
              this.search();
            }
          }
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    getProductList() {
      apiProcess.queryByCondition({ status: 1 }).then(res => {
        if (res.code === 1) {
          this.productList = res.data;
        }
      });
    },
    edit(item) {
      this.selectedItem = JSON.parse(JSON.stringify(item));
      this.addEditShow = true;
    },
    del() {
      this.handleDelete(this.selectedList);
    },
    handleDelete(no) {
      let list = [no];
      if (no instanceof Array) {
        list = no;
      }
      this.$confirm('是否确认删除？', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonClass: 'btnFalses',
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      })
        .then(() => {
          api.delProductionLine({ noList: list }).then(res => {
            if (res.code === 1) {
              this.$message.success('删除成功');
              this.search();
            }
          });
        })
        .catch(_ => {});
    }
  }
};
</script>
<style lang="scss" scoped>
.content-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
}
</style>
